<script setup lang="ts">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { sys_device_type, sys_grant_type, sys_normal_disable } from '/@/const/Options.ts'
import { usePagination } from '/@lib/hooks/usePagination.ts'
import { useLoading } from '/@lib/hooks/useLoading'
import { useForm } from '/@lib/hooks/useForm.ts'
import { ClientQuery, ClientVO } from '/@/api/system/sysClient/types'
import { ApiSysClient } from '/@/api/system/sysClient'
import AddOrUpdate from './AddOrUpdate.vue'

defineOptions({ name: 'sysClient' })

const { loading, showLoading, hideLoading } = useLoading()
const {
  pageNum, pageSize, total, setTotal, onChangeCurrent, onChangePageSize
} = usePagination(() => getTableList())
const queryFormRef = ref()
const { form: queryParams } = useForm<ClientQuery>({
  pageNum: computed(() => pageNum.value),
  pageSize: computed(() => pageSize.value)
})
const tableRef = ref()
const tableData = ref<ClientVO[]>([])
const tableFixed = ref('right')
const AddOrUpdateRef = ref()

/** 搜索按钮操作 */
const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}
/** 重置按钮操作 */
// const resetQuery = () => {
//   queryFormRef.value?.resetFields();
//   handleQuery();
// };

/** 新增按钮操作 */
const handleAdd = () => {
  AddOrUpdateRef.value?.openAdd()
}
/** 修改按钮操作 */
const handleUpdate = async (row: ClientVO) => {
  AddOrUpdateRef.value?.openEdit(row)
}
/** 删除按钮操作 */
const handleDelete = async (row: ClientVO) => {
  const _id = row.id
  const _idLabel = row.clientKey
  try {
    await ModalUtil.confirm('是否确认删除名称为【 ' + _idLabel + ' 】的数据项？')
    showLoading()
    await ApiSysClient.remove(_id)
    ModalUtil.msgSuccess('删除成功')
    await getTableList()
  } finally {
    hideLoading()
  }
}
/** 状态修改 */
const handleStatusChange = async (row: ClientVO) => {
  let text = row.status === '0' ? '启用' : '停用'
  try {
    await ModalUtil.confirm('确认要' + text + '【 ' + row.clientKey + ' 】吗?')
    showLoading()
    await ApiSysClient.changeStatus(row.id, row.status)
    ModalUtil.msgSuccess(text + '成功')
  } catch (err) {
    row.status = row.status === '0' ? '1' : '0'
  } finally {
    hideLoading()
  }
}

const getTableList = async () => {
  showLoading()
  try {
    const res = await ApiSysClient.page(queryParams)
    tableData.value = res.rows
    setTotal(res.total)
  } finally {
    hideLoading()
  }
}
getTableList()
const successCallback = () => {
  getTableList()
}
</script>

<template>
  <div class="page-container">
    <el-card shadow="never" class="flex-column flex-auto no-margin-bottom">
      <VipTableTool>
        <VipTableToolLeftPanel>
          <el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>
        </VipTableToolLeftPanel>

        <!-- 【只有一个 el-input 输入框时，且type为text类型】的情况下，解决按回车刷新页面的问题 -->
        <VipTableToolRightPanel>
          <el-form ref="queryFormRef" inline @submit.prevent="handleQuery">
            <el-form-item prop="clientKey">
              <el-input v-model="queryParams.clientKey" placeholder="请输入客户端Key" clearable />
            </el-form-item>
            <el-form-item>
              <el-button plain icon="Search" type="primary" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </VipTableToolRightPanel>
      </VipTableTool>

      <div class="flex-auto">
        <el-table ref="tableRef" v-loading="loading" :data="tableData" border style="height: 100%">
          <!--          <el-table-column type="selection" align="center" width="50" />-->
          <el-table-column type="index" align="center" label="序号" width="55" />

          <!--  主内容   -->
          <el-table-column label="客户端ID" align="center" prop="clientId" />
          <el-table-column label="客户端Key" align="center" prop="clientKey" />
          <el-table-column label="客户端秘钥" align="center" prop="clientSecret" />
          <el-table-column label="授权类型" align="center">
            <template #default="{ row }">
              <VipDictTag :options="sys_grant_type" :value="row.grantTypeList" />
            </template>
          </el-table-column>
          <el-table-column label="设备类型" align="center" width="120">
            <template #default="{ row }">
              <VipDictTag :options="sys_device_type" :value="row.deviceType" />
            </template>
          </el-table-column>
          <el-table-column label="Token活跃超时时间(秒)" align="center" prop="activeTimeout" />
          <el-table-column label="Token固定超时时间(秒)" align="center" prop="timeout" />
          <el-table-column label="状态" align="center" prop="status">
            <template #default="{ row }">
              <div class="flex-center">
                <VipDictTag :options="sys_normal_disable" :value="row.status" />
                <el-switch
                  class="margin-left"
                  v-model="row.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(row)"
                ></el-switch>
              </div>
            </template>
          </el-table-column>

          <!--  操作栏   -->
          <el-table-column label="操作" :fixed="tableFixed" align="center" width="120">
            <template #default="{ row }">
              <el-space>
                <el-button text type="primary" link @click="handleUpdate(row)">修改</el-button>
                <el-button text type="danger" link @click="handleDelete(row)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>

          <template #empty>
            <el-empty class="vip-data-empty" description="暂无数据" />
          </template>
        </el-table>
      </div>

      <VipPagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="onChangeCurrent"
        @size-change="onChangePageSize"
      />
    </el-card>

    <AddOrUpdate ref="AddOrUpdateRef" @submit-success="successCallback"></AddOrUpdate>
  </div>
</template>

<style scoped lang="scss">
.vip-table-tool {
  .el-form-item {
    //width: 300px;
    // margin-bottom: 0 !important;
    // margin-right: 16px;

    // :deep(.el-input) {
    //   width: 280px;
    // }
  }
}
</style>
